<template>
	<div id="photo">
		<div class="fixed">
			<div class="title flex">
				<div class="title_left">
					<img @click="back" src="../assets/image/return.png" />
				</div>
				<div class="add">图片上传</div>
				<div>
				</div>
			</div>
		</div>
		<div class="centers">
			<el-upload action="http://api.heruinet.com/index.php/waveguest/login/add_store_images" :limit="9" list-type="picture-card"
			 ref="upload" :before-upload="beforeAvatarUpload" :http-request="uploadFile" :on-change="handlePreview" :on-remove="handleRemove"
			 :auto-upload="true">
				<i class="el-icon-plus"></i>
			</el-upload>
		</div>
		<div class="foot flex">
			<div @click="skip">跳过</div>
			<div @click="skiptomy" type="primary">完成</div>
		</div>
		<el-dialog title="" :visible.sync="dialogVisible" top="35vh" width="80%" :before-close="handleClose">
			<span>上传成功</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="mySuibt">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogImageUrl: '',
				dialogVisible: false,
				formDate: [],
			};
		},
		methods: {
			mySuibt() {
				this.dialogVisible = false;
				this.$router.push({
					path: '/my'
				});
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			back() {
				this.$router.go(-1)
			},
			skip() {
				// this.$refs.upload.submit()
				this.$router.push({
					path: '/my'
				});
			},
			uploadFile(file) {
				console.log(file.file)
			},
			handleRemove(file, fileList) {
				// console.log(file);
			},
			handlePreview(file) {
				console.log(file.raw)
				this.formDate.push(file.raw)
			},
			skiptomy() {
				var data = []
				for (var i = 0; i < this.formDate.length; i++) {
					data.push(this.formDate[i]);
				}
				console.log(data.length)
				if (data.length > 0) {
					var param = new FormData();
					for (var i = 0; i < data.length; i++) {
						param.append('file[]', data[i], i);
					}
					param.append('store_id', localStorage.getItem("store_id"));
					var _this = this;
					var qs = require('qs');
					_this.$http.post(_this.baseURL + "/index.php/waveguest/login/add_store_images", param).then(response => {
						console.log(response)
						if (response.data.data === 1) {
							this.dialogVisible = true
						}
					}).catch(error => {

					});
				} else {
					this.$message.warning('上传内容不能为空!');
				}
				// $.ajax({
				//             url:'http://api.heruinet.com/index.php/waveguest/login/add_store_images',
				//             type:'POST',
				//             data:param,
				//             async: false,
				//             cache: false,
				//             contentType: false,
				//             processData: false,
				//             success:function(data){
				//                 // $("body").mLoading("hide");
				//                 
				//             },
				//             error:function(err){
				//                 // $("body").mLoading("hide");
				//                 alert( "上传失败");
				//             }
				//         });
				// this.$router.push({
				// 	path: '/my'
				// });
			},
			beforeAvatarUpload(file) {
				console.log(file.type)
				const imgType = file.type === 'image/jpeg' || file.type === 'image/png';
				if (!imgType) {
					this.$message.error('上传图片只能是 JPG/PNG 格式!');
				}
				return imgType;
			},
			// 上传图片出错
			uploadError(err, file, fileList) {
				this.$message.error('上传出错');
			}
		}
	}
</script>

<style>
	.el-upload-list--picture-card {
		margin: 1rem 2rem;
		display: inline;
		vertical-align: top;
		display: flex;
		flex-direction: column;
	}

	.el-upload--picture-card {
		margin: 2rem 2rem;
	}

	.el-upload-list--picture-card .el-upload-list__item {
		width: auto;
		height: 148px;
	}

	.el-upload--picture-card {
		display: flex;
		justify-content: center;
		align-items: center;
		width: auto;
		margin: 0rem 2rem;
		height: 148px;
		background: #FAFAFA;
	}

	.el-message {
		min-width: 4rem;
		top: 40% !important;
	}

	.el-icon-plus:before {
		content: "+";
		font-size: 4rem;
		color: #007AFF;
	}
</style>
<style scoped="scoped">
	.foot {
		position: fixed;
		bottom: 1rem;
		width: 100%;
		justify-content: space-around;
	}

	.foot>div {
		width: 6.43478rem;
		height: 1.8478rem;
		font-size: 0.6rem;
		border: 1px solid;
		text-align: center;
		line-height: 1.8478rem;
		border-radius: 0.474rem;
	}

	.foot>div:nth-child(1) {
		background: white;
		border: 1px solid #007AFF;
		color: #007AFF;
	}

	.foot>div:nth-child(2) {
		background: #007AFF;
		border: 1px solid #007AFF;
		color: white;
	}

	.title_left {
		width: 0.67391rem;
		height: 0.67391rem;
	}

	.fixed {
		position: fixed;
		top: 0;
		width: 100%;
		max-width: 640px;
		z-index: 999;
	}

	.title_left>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}

	.title {
		width: 90%;
		padding: 0 5% 0 5%;
		height: 2rem;
		font-size: 0.7193rem;
		background: white;
		align-items: center;
	}

	.title div {
		width: calc(100%/3);
		align-items: center;
	}

	.title>div:nth-child(2) {
		text-align: center;
	}

	.centers {
		position: fixed;
		top: 2rem;
		bottom: 4rem;
		width: 100%;
		background: #F5F6FA;
		overflow-y: scroll;
	}
</style>
